<!-- 我要提现  -->
<template>
	<view class="fullPage p30">
		<view class="container  pt110 bf border-r2 shadow">
			<view class="one" style="margin-top: 30upx;margin-bottom: 40px;">
				<view class="accountClass">
					<u-button type="primary" shape="circle" @click="accountFn">我的月卡套餐</u-button>
				</view>
				<view class="oneWithdrawDeposit">
					<u-button type="primary" shape="circle" @click="withdrawDepositFn">套餐订单列表</u-button>
				</view>
			</view>
			<!-- 月卡套餐列表 -->
			<view class="shadow" style="margin-top: 40upx;background-color: #eee;border-radius: 30upx;padding: 24rpx;">
				<view class="h60" style="margin-bottom: 15upx;font-size: 30upx;font-weight: 700;">月卡套餐列表</view>
				<view v-if="mealList.length!==0"
					style="display: flex;justify-content: flex-start;align-items: center;flex-wrap: wrap;">
					<view class="" v-for="item in mealList" :key="item.id"
						style="width: 30%;margin-bottom: 20upx;margin-right: 20upx;">
						<view class="setMeal" @click="chooseMenu(item)">
							<view v-if="mealId == item.id" class="xuanzhong">
								选中
							</view>
							<view class="one">{{ item.days }}天</view>
							<view class="two">¥{{ item.price }}</view>
							<view class="three">{{ item.nums ===-1 ? '无限': item.nums }}次</view>
							<view class="four">{{ item.name }}</view>
						</view>
					</view>
				</view>
				<view v-if="mealList.length==0"
					style="margin-bottom: 40upx;font-size: 40upx;text-align: center;color: #aaa;">
					暂无套餐
				</view>
			</view>


		</view>

		<view
			style="position: fixed;bottom: 0;left: 0upx;right: 0upx;background-color:#eee;z-index: 100;padding-top: 30upx;"
			class="h150">
			<view style="display: flex;justify-content: space-between;align-items: center;padding:0 40upx ;">
				<view class="">
					<text style="font-weight: 700;font-size: 50upx;">租金：</text>
					<text
						style="font-weight: 700;font-size: 50upx;color: #3282ff;margin-right: 20upx;">{{cashMoney}}</text>
					元
				</view>
				<view>
					<u-button type="primary" @click="confBuy">立即支付</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		userMealGetDeviceMeal,
		userMealBuyMeal
	} from '@/api/user.js'
	export default {
		data() {
			return {
				mealList: [], // 套餐列表
				deviceId: '',
				mealId: '',
				cashMoney: '',
			}
		},
		onLoad(e) {
			console.log('3333333', e, e.deviceId);
			this.deviceId = e.deviceId || ''
		},

		onShow() {
			this.monthInitFn()

		},

		methods: {
			// 立即支付
			async confBuy() {
				let resultss = await this.confirm({
					content: `确定购买该套餐？`,
				})
				let wallet = wx.getStorageSync('wallet')
				let mone = wallet.balance + wallet.giveMoney
				let money = mone > this.cashMoney ? this.cashMoney : mone
				if (resultss.confirm) {
					const res = await userMealBuyMeal({
						id: this.mealId,
						balanceMoney: money,
					})
					// console.log('购买套餐', res);
					if (res.code === 200) {
						let data = res.data || {} //有data是微信支付  没有是余额支付
						// 余额支付
						if (JSON.stringify(data) === "{}") {
							this.toast('余额支付，购买套餐成功')
							setTimeout(() => {
								this.routerLink({
									path: '/pages/main/mine',
								})
							}, 2000)
						} else { // 微信支付
							this.toast('余额不足，推荐使用微信支付')
							let parms = {
								appId: data.appId,
								nonceStr: data.nonceStr,
								package: data.package,
								paySign: data.paySign,
								signType: data.signType,
								timeStamp: data.timeStamp,
							}
							setTimeout(() => {
								this.wx_payment(parms, result => {
									// console.log('123321123', result);
									if (result == 1) {
										this.toast('微信支付，购买套餐成功')

										setTimeout(async () => {
											this.routerLink({
												path: '/pages/main/mine',
											})
										}, 2000)
									} else if (result == 2) {
										this.toast('取消支付')
									}
								})
							}, 2000)
						}
					} else {
						this.toast(res.msg)
					}
				} else {
					this.toast('已取消购买套餐')
				}
			},

			// 月卡套餐列表
			async monthInitFn() {
				const res = await userMealGetDeviceMeal({
					deviceId: this.deviceId,
				})
				this.mealList = res.data || []
				if (res.data.length !== 0) {
					this.mealId = res.data[0].id
					this.cashMoney = res.data[0].price
				}

			},
			// 选择月卡套餐
			chooseMenu(e) {
				this.mealId = e.id
				this.cashMoney = e.price
			},

			// 我的月卡套餐  
			accountFn() {
				this.routerLink({
					path: '/pages/user/monthlyCard/accountList',
				})
			},
			// 套餐订单列表  
			withdrawDepositFn() {
				this.routerLink({
					path: '/pages/user/monthlyCard/extractCash',
				})
			},

		}
	}
</script>

<style lang="scss">
	.one {
		text-align: center;
		padding: 0upx 30upx;
		position: relative;
		margin-bottom: 25upx;

		.accountClass {
			position: absolute;
			top: -105upx;
			left: -10upx;
			transform: scale(0.77, 0.77);
		}

		.oneWithdrawDeposit {
			position: absolute;
			top: -105upx;
			right: -10upx;
			transform: scale(0.77, 0.77);
		}
	}

	.setMeal {
		position: relative;
		border: 2px solid #b9e2f8;
		padding-top: 10upx;
		width: 100%;
		border-radius: 20upx;
		text-align: center;
		display: inline-block;
		font-size: 28upx;
		overflow: hidden;
		color: #888 !important;
		box-shadow: 3px 1px 3px 2px #ccc;

		.one {
			font-size: 28upx;
			font-weight: 600;
			line-height: 32upx;
		}

		.two {
			font-size: 48upx;
			font-weight: 500;
			color: #2879fc;
			line-height: 55upx;
			padding-bottom: 15upx;
		}

		.three {
			line-height: 42upx;
			color: #000;
		}

		.four {
			font-weight: 500;
			line-height: 42upx;
			font-size: 26upx;
			background-color: #b9e2f8;
			color: #000;
			padding: 6upx 0;
			white-space: nowrap;
			/*强制单行显示*/
			text-overflow: ellipsis;
			/*超出部分省略号表示*/
			overflow: hidden;
			/*超出部分隐藏*/
			width: 100%;
		}

		.xuanzhong {
			position: absolute;
			top: -50upx;
			right: -50upx;
			background-color: red;
			color: #fff;
			text-align: center;
			width: 100upx;
			height: 100upx;
			line-height: 165upx;
			transform: rotate(45deg);
			font-size: 26upx;
			font-weight: 700;
		}

	}
</style>